 <template>
	<view class="content">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff" title="我的钱包" bgColor="transparent" :autoBack="true"
			:placeholder="false">
		</u-navbar>
		<view style="height: 6vh;"></view>
		<view class="my-top">
			<view class="top-left">
				<image :src=" info.u_img || '/static/my/my_head.png'" mode=""></image>
				<view class="top-tell">
					<view>
						{{info.username || '用户名'}}
					</view>
					<view class="tell">
						{{info.mobile || '188****888'}}
					</view>
				</view>
			</view>
			<!-- <view class="withdrawal" @click="goWithdrawal">
				去提现
			</view> -->
		</view>
		<view class="my-content">
			<view class="head">
				<view :class="item.show == true?'activity':'stillness'" class="head-item"
					v-for="(item,index) in headList" :key="index" @click="headTab(index)">
					{{item.text}}
				</view>
			</view>
			<view :style="cutType == 0? 'opacity: 1;':'opacity: 0;height:0;overflow: hidden;'">
				<view class="asset">
					<view class="asset-cont">
						<view class="asset-item">
							<view class="cont-num">
								{{info.Withdrawal||0}}
							</view>
							<view class="cont-text">
								可提现USDT
							</view>
						</view>
						<view class="asset-item">
							<view class="cont-num">
								{{info.balance||0}}
							</view>
							<view class="cont-text">
								矿场
							</view>
						</view>
					</view>
				</view>
				<u-tabs @click="recordType" :inactiveStyle="inactiveStyle"  lineColor="#fff" :itemStyle="itemStyle"
					:activeStyle="activeStyle" :list="list"></u-tabs>
				<view class="record">
					<view class="record-item" v-for="(item,index) in record" :key="index">
						<view class="item-left">
							<view>{{item.message}}</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
						<view class="price">
							{{item.num}}
						</view>
					</view>
				</view>
				<u-loadmore :status="wallStatus" />
			</view>
			<view :style="cutType == 1? 'opacity: 1;':'opacity: 0;height:0;overflow: hidden;'">
				<u-tabs  :inactiveStyle="inactiveStyle" lineColor="#fff" :itemStyle="factoryStyle"
					:activeStyle="activeStyle" :list="factory" @click="cutMill"></u-tabs>
				<view class="factory">
					<view class="factory-item" v-for="(item,index) in mill_info" :key="index">
						<view class="item-head">
							<image :src="item.logo || '/static/factory/factory-img.png'" mode=""></image>
							<view class="head-right">
								<view class="right_title">
									<view>
										{{item.name}}
									</view>
									<view class="state" v-if="item.status == 1">
										进行中
									</view>
									<view class="state finish" v-if="item.status == 2">
										已完成
									</view>
								</view>
								<view class="right-time">
									<view>
										购买时间
									</view>
									<view class="time">
										{{item.sta_time || '--'}}
									</view>
								</view>
								<view class="right-time">
									<view>
										到期时间
									</view>
									<view class="time">
										{{item.end_time || '--'}}
									</view>
								</view>
								<view class="rebate">
									每日返本返息
								</view>
								<view class="price">
									实付云矿石 <text>{{item.price}}</text>
								</view>
							</view>
						</view>
						<view class="info-rate">
							<view class="rate-item">
								<view class="rate-num">
									{{item.days}}<text>天</text>
								</view>
								<view class="rate-text">
									质押周期
								</view>
							</view>
							<view class="rate-item">
								<view class="rate-num">
									{{item.rate}}%
								</view>
								<view class="rate-text">
									返利利率
								</view>
							</view>
							<view class="rate-item">
								<view class="rate-num">
									{{item.allAward}}
								</view>
								<view class="rate-text">
									到期收益
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="millStatus" />
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				assets: {},
				headList: [{
						text: '钱包',
						show: true
					},
					{
						text: ' 矿机',
						show: false
					}
				],
				list: [{
					name: '全部',
				}, {
					name: '提现'
				}, {
					name: '其他'
				}],
				factory: [{
					name: '进行中',
				}, {
					name: '已完成',
				}],
				factoryStyle: {
					width: '50%',
					height: '100rpx',
				},
				itemStyle: {
					width: '33%',
					height: '100rpx',
				},
				activeStyle: {
					color: '#fff',
					fontSize: '28rpx',
					fontWeight: '600'
				},
				inactiveStyle: {
					color: '#fff',
					fontSize: '24rpx',
					color: '#ddd',
				},
				record: [],
				page: 1,
				type: 1,
				wallStatus: 'loadmore',
				millStatus:'loadmore',
				cutType: 0,
				mill_info:[],
				millPage:1,
				millType:1
			}
		},
		onLoad(e) {
			if(e.type == 1){
				this.cutType = 1
				this.headList[0].show = false
				this.headList[1].show = true
			}
			this.getWallet()
			this.getMill()
		},
		onReachBottom() {
			if(this.cutType == 0){
				this.page++
				this.wallStatus = 'loading'
				this.getWallet()
			}
			if(this.cutType == 1){
				this.millPage++
				this.millStatus = 'loading'
				this.getMill()
			}
		},
		methods: {
			getWallet() {
				let params = {
					type: this.type,
					page: this.page
				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/accountLog',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.info = res.user
						if (res.data.list.length < 10) {
							this.wallStatus = 'nomore'
						}
						if (this.page == 1) {
							this.record = res.data.list
						} else {
							this.record = [...this.record, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			headTab(index) {
				this.headList.map((item) => {
					item.show = false
				})
				this.headList[index].show = true
				this.cutType = index
				
				if(index == 0){
					this.getWallet()
				}
				if(index == 1){
					this.getMill()
				}
			},
			recordType(index) {
				let num = index.index + 1
				this.type = num
				this.page = 1
				this.getWallet()
				this.wallStatus = 'loadmore'
			},
			goWithdrawal(){
				uni.navigateTo({
					url:'/pages/my/my_wallet/withdrawal'
				})
			},
			getMill(){
				let params = {
					page:this.millPage,
					type:this.millType,
				}
				this.$Request({
					method: 'POST',
					url: '/api/Trade/purchaseList',
					data: params
				}).then(res => {
					if (res.code == 1) {
						if (res.data.list.length < 10) {
							this.millStatus = 'nomore'
						}
						if (this.millPage == 1) {
							this.mill_info = res.data.list
						} else {
							this.mill_info = [...this.mill_info, ...res.data.list]
						}
						this.mill_info.map(item=>{
							 item.allAward = (((item.price * 100) * item.days * (item.rate * 100)) / 1000000).toFixed()
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			cutMill(index){
				let num = index.index + 1
				this.millType = num
				this.millPage = 1
				this.getMill()
				this.millStatus = 'loadmore'
			}
		}
	}
</script>
<style>
	page{
		background-color: #17191A;
	}
	.btn-color {
		color: #17191A !important;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 558rpx;

		.my-top {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;

			.top-left {
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 30rpx;
					border-radius: 50%;
				}

				.top-tell {
					color: #fff;
					font-size: 32rpx;
					font-weight: 600;
					
					.tell {
						font-size: 24rpx;
						color: #eee;
						margin-top: 10rpx;
						font-weight: 400;
					}
				}
			}
			.withdrawal {
				background: linear-gradient( 90deg, #C8F673 0%, #98F083 100%);
				padding: 14rpx 30rpx;
				border-radius: 30rpx;
				color: #17191A;
				font-size: 28rpx;
				font-weight: 600;
				
			}
		}

		.my-content {
			padding: 30rpx;
			color: #fff;

			.head {
				width: 70%;
				display: flex;
				justify-content: space-between;
				text-align: center;
				background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
				border-radius: 40rpx;
				border: 4rpx solid rgba(108, 233, 137, 0.12);
				margin: 0 auto;
				margin-top: 40rpx;
			
				.head-item {
					width: 48%;
					width: 305rpx;
					font-size: 28rpx;
					font-weight: 600;
					border: 1rpx solid transparent;
					padding: 20rpx;
					border-radius: 40rpx;
				}
			
				.activity {
					width: 48%;
					color: #17191A;
					background: linear-gradient(90deg, #C8F673 0%, #98F083 100%);
				}
			
				.stillness {
					width: 48%;
					color: #fff;
				}
			}

			.asset {
				color: #fff;
				
				

				.asset-cont {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-around;
					padding: 30rpx;
					text-align: center;
					background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
					border: 4rpx solid rgba(108,233,137,0.12);
					border-radius: 30rpx;

					.asset-item {

						.cont-num {
							font-size: 36rpx;
							font-weight: 600;
						}

						.cont-text {
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
				}
			}

			.record {
				padding: 20rpx 10rpx;

				.record-item {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.5);

					.item-left {
						font-size: 26rpx;
						font-weight: 600;

						.time {
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}

					.price {
						color: #f35656;
						font-weight: 600;
					}
				}
			}

			.factory {
				margin-top: 20rpx;
				.factory-item {
					background-color: rgba(255, 255, 255, .05);
					padding: 20rpx;
					border-radius: 20rpx;
					margin-top: 20rpx;
					.item-head {
						display: flex;
						align-items: center;
						image {
							width: 240rpx;
							height: 240rpx;
							margin-right: 20rpx;
						}
						.head-right{
							width: 70%;
							.right_title {
								display: flex;
								justify-content: space-between;
								font-size: 32rpx;
								font-weight: 600;
								color: #fff;
								.state {
									font-size: 26rpx;
									color: #eee;
								}
								.finish {
									color: #4ce500;
								}
							}
							.right-time {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 10rpx;
								font-size: 26rpx;
								color: #b6b6b6;
								.time  {
									color: #fff;
									font-size: 24rpx;
								}
							}
							.rebate {
								text-align: right;
								margin-top: 10rpx;
								font-size: 28rpx;
							}
							.price {
								text-align: right;
								margin-top: 10rpx;
								font-size: 24rpx;
								text {
									font-size: 32rpx;
									color: #f50d04;
									margin-left: 10rpx;
									font-weight: 600;
								}
							}
						}
					}
					.info-rate {
						display: flex;
						justify-content: space-around;
						border-radius: 30rpx;
						padding: 20rpx;
						background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
						border: 4rpx solid rgba(108,233,137,0.12);
						text-align: center;
						margin-top: 20rpx;
						.rate-item {
							.rate-num {
								color: #fff;
								font-size: 32rpx;
								font-weight: 600;
								text {
									font-size: 26rpx;
									font-weight: 400;
								}
							}
							.rate-text {
								color: #ddd;
								font-size: 26rpx;
								margin-top: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>